<template>
  <div class="over-template">
    <div class="over-template-itemnew">
      <div class="title">{{ itemData.title }}</div>
      <div class="over-template-item"
           v-for="item in itemData.info">
        <div class="over-template-item-left">
          <div class="name">{{ item.name }}</div>
        </div>
        <div class="over-template-item-right">
          <div class="details-item"
               v-for="(value, key) in filterOtherChineseKeys(item)"
               :key="key"
               :style="{ width: getWidthByItemName(item.name) }">
            <label class="label">{{ key }}</label>
            <span class="value">{{ addThousandsSeparator(value) }}</span>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
const props = defineProps({
  itemData: {
    type: Object,
    required: true,
  },
});

const info = ref([]);

const firstChineseKey = (obj) => {
  for (let key in obj) {
    if (obj.hasOwnProperty(key) && /[\u4e00-\u9fa5]/.test(key)) {
      return key;
    }
  }
  return null;
};

const filterOtherChineseKeys = (obj) => {
  // const firstKey = firstChineseKey(obj);
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => key !== "name")
  );
};
const getWidthByItemName = (itemName) => {
  // 根据item.name的值返回宽度
  switch (itemName) {
    case '网络':
      return '1.8rem';
    case '连接':
      return '1.88rem';
    case '主机':
      return '1.88rem';
    default:
      return '1.15rem';
  }
};
watch(
  () => props.itemData,
  () => {
    // info.value = JSON.parse(props.itemData.info || [])
    // console.log("info.value",info.value)
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.over-template {
  padding: 0 0.15rem 0 0;
  .title {
    font-size: 0.18rem;
    color: #151a24;
    padding: 0.15rem 0 0 0.15rem;
  }
  .over-template-itemnew {
    height: 5.8rem;
    width: 4.46rem;
    margin-top: 0.08rem;
    // background: rgba(20, 112, 204, 0.1);
    background-image: linear-gradient(180deg, #f2f7ff 0%, #fdfeff 100%);
    border: 0.01rem solid #e6ebf5;
    overflow: auto;
    .over-template-item {
      height: 0.36;
      padding: 0.08rem 0.16rem 0.08rem 0.16rem;

      align-items: center;
      .over-template-item-left {
        margin-right: 0.1rem;
        .name {
          color: #1d2129;
          font-size: 0.16rem;
        }
        .text {
          margin-top: 0.04rem;
          display: flex;
          align-items: center;
          .label {
            height: 0.2rem;
            color: #ffffffb3;
            font-size: 0.14rem;
          }
          .value {
            height: 0.2rem;
            color: #ffffff;
            font-size: 0.16rem;
            margin-left: 0.04rem;
          }
        }
      }
      .over-template-item-right {
        margin-top: 0.12rem;
        padding: 0.1rem;
        // background: rgba(20, 112, 204, 0.1);
        background-image: linear-gradient(180deg, #fdfeff 0%, #fbfcff 100%);
        border: 0.01rem solid #e6ebf5;
        display: flex;
        flex-wrap: wrap;
        gap: 0.16rem;
        // justify-content: space-around;
        // flex-direction:row-reverse;
        // justify-content: end;
        .details-item {
          width: 1rem; /* 假设每行三个元素，减去间距 */
          box-sizing: border-box; /* 确保padding和border包含在width内 */
          // width: 1.2rem;
          // margin-right: 0.16rem;
          // max-width: 1.5rem;
          display: flex;
          flex-direction: column;
          // padding-right: 0 0.08rem;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .label {
            height: 0.2rem;
            color: #86909c;
            font-size: 0.14rem;
          }
          .value {
            height: 0.2rem;
            margin-top: 0.08rem;
            color: #1d2129;
            font-size: 0.16rem;
          }
        }
        .details-item:last-child {
          padding-right: 0;
          margin-right: 0;
        }
      }
    }
  }
}
.over-template:nth-child(4n) {
  padding-right: 0;
}
</style>